<template>
  <div id="lawyer">
    <div class="header">
      <i class="iconfont icon-fontclass-daili"></i>
      <div class="title">选择律师</div>
    </div>
    <div class="list">
      <van-radio-group v-model="radio">
        <div v-for="item in listData" :key="item.id" class="item" ref="item">
          <div class="flex">
            <div class="checkbox">
              <van-radio :name="item.id" @click="handle(item)" :disabled="item.status == 0 && item.service_data.type == 'tel'" ></van-radio>
            </div>
            <div class="info">
              <van-image @click="link(item.id)" class="goods-img" round width="2.5rem" height="2.5rem" :src="item.avatar_image" />
              <div class="box">
                <div class="name">
                  <span class="lawyer-name">{{ item.name }}</span>
                  <span class="c-daa032">{{ item.title }}</span>
                </div>
                <div class="flex m-tb-5">
                  <div class="flex wrap">
                    <span class="job-years c-6b6b6b">执业{{ item.year }}年</span>
                    <span class="doamin" v-for="chi in item.category_data" :key="chi.id">{{ chi.title }}</span>
                  </div>
                </div>
                <div class="office-name c-6b6b6b" @click.stop="link(item.lf_id)">{{ item.city_name }}|{{ item.lawyer_firm.name }}</div>
              </div>
            </div>
          </div>
          <div class="footer m-tb-5" v-if="radio == item.id">
            <template v-if="type == 'lawyer'">
              <span class="c-6b6b6b" v-if="item.service_data.type == 'tel'">服务：电话咨询</span>
              <span class="c-6b6b6b" v-if="item.service_data.type == 'line'">服务：在线咨询有效期{{ item.service_data.day }}天</span>
              <span class="price">￥{{ item.service_data.amount }}</span>
            </template>
          </div>
        </div>
      </van-radio-group>
    </div>
  </div>
</template>

<script>
import { Image } from "vant";
export default {
  props: {
    goods_info: {
      type: Object
    }
  },
  mounted() {
    this.listData = this.goods_info.lawyers
    if(this.goods_info.lawyers.length!==0){
       let _arr =[];
      if(this.goods_info.lawyers.length==1){
        _arr=this.goods_info.lawyers;
      }else{
        _arr = this.goods_info.lawyers.filter(item => {
            if(item.status == null){
              return item
            }
            if(item.status == 1){
              return item
            }
          });
      }
        this.radio = _arr[0].id;
        this.$emit("lawyerInfo",_arr[0]);
    }
  },
  data() {
    return {
      radio: "",
      type: "lawyer",
      listData:[],
      disabled:false
    };
  },
  methods:{
    link(id){
      this.$router.push(this.fun.getUrl("lawyerDetail",{id},{order_type:'lawyer'}))
    },
    handle(data){
      if(data.service_data.type == "tel" && data.status==0){
          return this.$toast("律师休息，暂不能购买电话咨询服务");
      }
      this.$emit("lawyerInfo",data);
    }

  },
  components: {
    VanImage: Image
  }
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  color: #daa032;
}

.title {
  padding-left: 0.2rem;
}

.footer {
  border-top: 1px solid rgba(241, 241, 241, 100);
  text-align: left;
  padding: 1rem 1rem 0.5rem;
}

.lawyer-name {
  font-size: 1rem;
}

.wrap {
  flex-wrap: wrap;
}

.item {
  width: 100%;
  margin: 1rem auto;
  padding: 1rem 1rem 1rem 0;
  border-radius: 8px;
  box-shadow: 0 1px 15px 0 rgba(199, 199, 199, 0.53);
}

.checkbox {
  padding-top: 0.6rem;
  margin-right: 1rem;
  margin-left: 1rem;
}

.m-tb-5 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.flex {
  display: flex;
}

.job-years {
  margin-right: 0.5rem;
}

.doamin {
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
  border: solid 1px #f5b435;
  color: #f5b435;
  margin: 0.1rem;
  font-size: 0.8rem;
}

.info {
  flex: 1;
  display: flex;
}

.c-daa032 {
  color: #daa032;
}

.box {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 0.5rem;
  text-align: left;

  .name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
}

.c-6b6b6b {
  color: #6b6b6b;
}

.title {
  text-align: left;
}

.price {
  color: #e72020;
  font-size: 0.8rem;
}

#lawyer {
  background-color: #fff;
  padding: 0.6rem;
}
</style>
